import { ProColumns, ProTable } from '@ant-design/pro-table';
import { Divider, message, Modal, Popconfirm, Typography } from 'antd';
import React, { PropsWithChildren, useRef } from 'react';
import { ActionType } from '@ant-design/pro-components';
import { Space } from 'antd/es';
import {
  captainGetApplyTeam,
  checkJoinApplyTeam,
  checkNoJoinApplyTeam,
} from '@/services/applyService';
import { UserType } from '@/models/user';
import { ApplyType } from '@/models/apply';

interface ApplyModalProps {
  modalVisible: boolean;
  onSubmit: () => void;
  onCancel: () => void;
  loginUser: UserType.UserVO; //当前用户的信息
  allMember: number; // 队伍id
}

/**
 * 同意加入队伍
 * @constructor
 * @param params
 */
const CheckJoin = async (params: ApplyType.ApplyCheckJoinTeamRequest) => {
  if ((params?.userId || 0) <= 0) {
    message.loading('请先进行登入！');
    return [];
  }
  const hide = message.loading('同意中');
  try {
    await checkJoinApplyTeam({
      ...params,
    });
    message.success('成功加入');
  } catch (error: any) {
    hide();
    message.success('加入失败:' + error.message);
  } finally {
    hide();
  }
};

/**
 * 拒绝加入队伍
 * @constructor
 * @param params
 */
const CheckNoJoin = async (params: ApplyType.ApplyCheckNoJoinTeamRequest) => {
  const hide = message.loading('拒绝中');
  try {
    await checkNoJoinApplyTeam({ ...params });
    message.success('完成拒绝');
  } catch (error) {
    hide();
    message.success('拒绝');
  } finally {
    hide();
  }
};

const ApplyTeam: React.FC<PropsWithChildren<ApplyModalProps>> = (props) => {
  const { modalVisible, allMember, onCancel, loginUser } = props;
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<ApplyType.TeamApplyVo>[] = [
    {
      title: '用户头像',
      dataIndex: ['userVo', 'avatarUrl'],
      valueType: 'image',
    },
    {
      title: '用户昵称',
      dataIndex: ['userVo', 'userName'],
      valueType: 'text',
    },
    {
      title: '申请介绍',
      dataIndex: 'applyContent',
      valueType: 'text',
    },
    {
      title: '性别',
      dataIndex: ['userVo', 'gender'],
      hideInForm: false,
      valueEnum: {
        0: { text: '男' },
        1: { text: '女' },
      },
    },
    {
      title: '用户邮箱',
      dataIndex: ['userVo', 'email'],
      valueType: 'text',
    },
    {
      title: '账号状态',
      dataIndex: ['userVo', 'userStatus'],
      hideInForm: false,
      valueEnum: {
        0: { text: '正常' },
        1: { text: '封号' },
      },
    },
    {
      title: '用户个人信用',
      dataIndex: ['userVo', 'creditsNum'],
      valueType: 'text',
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      valueType: 'time',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space split={<Divider type="vertical" />}>
          <Popconfirm
            title="你确定要同意他加入队伍吗？"
            onConfirm={() =>
              CheckJoin({
                id: record?.id || 0,
                userId: record?.userId,
                teamId: record.teamId,
              }).then(() => {
                actionRef?.current?.reload();
              })
            }
            okText="确认"
            cancelText="取消"
          >
            <Typography.Link type="danger">同意</Typography.Link>
          </Popconfirm>
          <Popconfirm
            title="你确定要拒绝他加入队伍吗？"
            onConfirm={() => {
              CheckNoJoin({
                id: record?.id || 0,
                userId: record?.userId,
                teamId: record.teamId,
              }).then(() => {
                actionRef?.current?.reload();
              });
            }}
            okText="确认"
            cancelText="取消"
          >
            <Typography.Link type="danger">拒绝</Typography.Link>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <Modal
      destroyOnClose
      title="新建"
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
      width={'80%'}
    >
      <ProTable<ApplyType.TeamApplyVo>
        headerTitle="用户管理"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        request={async () => {
          const { data, code } = await captainGetApplyTeam({
            userId: loginUser.id,
            teamId: allMember,
          });
          return {
            data: data || [],
            success: code === 0,
          } as any;
        }}
        columns={columns}
      />
    </Modal>
  );
};

export default ApplyTeam;
